<template>
  <div class="upload-item-container">
    <p style="margin-bottom: 10px">{{ file.name }}</p>
    <ElProgress
      :percentage="progress"
      :stroke-width="10"
      striped
      style="margin-bottom: 8px"
    />
    <div class="upload-item">
      <div style="margin-right: auto">
        <div v-if="file.status === 'uploading'" class="upload-flag">
          <ElIcon>
            <Upload />
          </ElIcon>
          <span>上传中</span>
        </div>
        <div
          v-if="file.status === 'error'"
          class="upload-flag"
          style="color: var(--el-color-error)"
        >
          <ElIcon>
            <CircleClose />
          </ElIcon>
          <span>上传失败</span>
        </div>
        <div
          v-if="file.status === 'success'"
          class="upload-flag"
          style="color: var(--el-color-success)"
        >
          <ElIcon>
            <CircleCheck />
          </ElIcon>
          <span>上传完成</span>
        </div>
        <div v-if="file.status === 'paused'" class="upload-flag">
          <ElIcon>
            <CircleClose />
          </ElIcon>
          <span>已暂停</span>
        </div>
        <div v-if="file.status === 'hashing'" class="upload-flag">
          <ElIcon>
            <Loading />
          </ElIcon>
          <span>解析中</span>
        </div>
        <div></div>
      </div>

      <ElLink
        v-if="file.status === 'error'"
        type="primary"
        @click="emits('retry', file.id)"
        >重试
      </ElLink>
      <ElLink
        v-if="['success', 'error'].includes(file.status)"
        type="primary"
        @click="emits('clear', file.id)"
        >清除
      </ElLink>
      <template v-else>
        <ElLink type="primary" @click="handlePause">{{
          paused ? '恢复' : '暂停'
        }}</ElLink>
        <ElLink type="primary" @click="emits('cancel', file)">取消</ElLink>
      </template>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  file: {
    type: Object,
    required: true
  },
  progress: {
    type: Number,
    required: true
  }
})

const emits = defineEmits(['clear', 'pause', 'cancel'])

const paused = ref(false)

const handlePause = () => {
  paused.value = !paused.value
  emits('pause', props.file.id, paused.value)
}
</script>

<style scoped>
.upload-item-container {
  border-bottom: 1px solid #e4e7ed;

  .upload-item {
    display: flex;
    justify-content: left;
    align-items: center;
    padding-right: 10px;

    .el-link {
      font-size: 16px;
      margin-left: 10px;
      margin-bottom: 8px;
    }

    .upload-flag {
      color: #606266;

      .el-icon,
      span {
        vertical-align: middle;
      }
    }
  }
}
</style>
